<template>
  <div>
    <input type="text" :value="value" style="display: none" />
    <el-cascader
      v-model="select"
      :options="customerDeptTree"
      :props="props"
      :change-on-select="changeOnSelect"
      class="w-100"
      v-on="$listeners"
      @change="handleChange"
    ></el-cascader>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { cascaderFind, cascaderFindAll } from '@vimi/utils-tool'

export default {
  components: {},
  props: {
    value: {
      type: String,
    },
  },
  data() {
    return {
      select: [],
      selectValue: '',
      props: {
        value: 'datum_customer_dept_id',
        label: 'dept_name',
      },
    }
  },
  computed: {
    ...mapGetters(['customerDeptTree']),
    changeOnSelect() {
      return (this.$attrs && this.$attrs.changeOnSelect) || true
    },
  },
  watch: {
    value() {
      this.initSelect()
    },
  },
  created() {
    this.initSelect()
  },
  mounted() {},
  methods: {
    initSelect() {
      if (!this.value) {
        this.select = []
        return false
      }
      this.select = cascaderFindAll(
        this.customerDeptTree,
        t => t.datum_customer_dept_id === this.value
      ).map(item => item.datum_customer_dept_id)
    },

    handleChange(vs) {
      this.selectValue = vs.length ? vs[vs.length - 1] : ''
      this.$emit('input', this.selectValue)
      this.$emit(
        'changes',
        this.selectValue,
        cascaderFind(this.customerDeptTree, t => t.datum_customer_dept_id === this.selectValue) ||
          {}
      )
    },
  },
}
</script>
<style lang="scss" scoped></style>
